<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/WEB-INF/include/head.jsp" %>
    <link rel="stylesheet" type="text/css" href="${ctxStatic}js/fuelux/css/tree-style.css"/>
</head>
<body>
<section>
    <!-- left side start-->
    <%@ include file="/WEB-INF/include/menu.jsp" %>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--search start-->
            <form class="searchform" action="index.html" method="post">
                <input type="text" class="form-control" name="keyword" placeholder="Search here..."/>
            </form>
            <!--search end-->

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge">5</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">You have 5 Mails </h5>
                            <ul class="dropdown-list normal-list">
                                <li class="new">
                                    <a href="">
                                        <span class="thumb"><img src="${ctxStatic}images/photos/user1.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">John Doe <span
                                                  class="badge badge-success">new</span></span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="${ctxStatic}images/photos/user2.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jonathan Smith</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="${ctxStatic}images/photos/user3.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jane Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="${ctxStatic}images/photos/user4.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Mark Henry</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="${ctxStatic}images/photos/user5.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jim Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="new"><a href="">Read All Mails</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="${ctxStatic}images/photos/user-avatar.png" alt=""/>
                            ${sessionScope.user.name}
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">

                            <li><a href="#"><i class="fa fa-cog"></i> 修改密码 </a></li>
                            <li><a href="${ctx}/logout"><i class="fa fa-sign-out"></i> 退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                科室管理
            </h3>
        </div>
        <!-- page heading end-->
        <hr/>
        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel">
                        <div class="panel-body">
                            <div class="col-lg-12">
                                <button role="button" class="btn btn-primary pull-right" onclick="add('')">增加科室</button>
                                <span class="pull-right">&nbsp;</span>
                            </div>
                            <div class="col-lg-12">&nbsp;</div>
                            <div id="tree" class="tree tree-plus-minus">
                                <div class="tree-folder" style="display:none;">
                                    <div class="tree-folder-header">
                                        <i class="fa fa-folder"></i>
                                        <div class="tree-folder-name"></div>
                                    </div>
                                    <div class="tree-folder-content"></div>
                                    <div class="tree-loader" style="display: none;"></div>
                                </div>
                                <div class="tree-item" style="display:none;">
                                    <i class="tree-dot"></i>
                                    <div class="tree-item-name"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <%@ include file="/WEB-INF/include/footer.jsp" %>
        <!--footer section end-->

        <!-- 新增窗口 -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="addOfficeModal"
             class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">新增科室</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" id="addForm">
                            <div class="form-group">
                                <label for="pidOfficeName" class="col-lg-2 col-sm-2 control-label">上级科室</label>
                                <div class="col-lg-10">
                                    <input type="hidden" id="pid" />
                                    <input type="text" class="form-control" id="pidOfficeName" placeholder="" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="officeCode" class="col-lg-2 col-sm-2 control-label">科室编号</label>
                                <div class="col-lg-10">
                                    <input type="text" class="form-control" name="officeCode" id="officeCode" placeholder="科室编号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="officeName" class="col-lg-2 col-sm-2 control-label">科室名称</label>
                                <div class="col-lg-10">
                                    <input type="text" class="form-control" name="officeName" id="officeName" placeholder="科室名称">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" class="close"
                                aria-hidden="true">关闭
                        </button>
                        <button type="button" class="btn btn-primary" onclick="submitForm()">增加</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- modal -->

    </div>
    <!-- main content end-->
</section>

<%@ include file="/WEB-INF/include/js.jsp" %>
<script src="${ctxStatic}js/fuelux/js/tree.min.js"></script>
<script type="text/javascript">

    function submitForm(){
        $('#addForm').submit();
    }

    $(function(){
        $('#addForm').validate({
            rules:{
                officeCode:{
                    required:true,
                    maxlength:20,
                    remote:{
                        url:'${ctx}/admin/checkOfficeCode',
                        type:'get',
                        data:{
                            officeCode:function(){return $('#officeCode').val()}
                        }
                    }
                },
                officeName:{
                    required:true,
                    maxlength:50
                }
            },
            messages:{
                officeCode:{
                    required:'请填写科室编码',
                    maxlength:'科室编码长度最大为20个字符',
                    remote:'科室编码重复'
                },
                officeName:{
                    required:'请输入科室名称',
                    maxlength:'科室名称最大长度不能超过50个字符'
                }
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parent());
            },
            submitHandler:function(){
                insertOffice();
            }
        });

        loadData();
    });

    function insertOffice(){
        
        var postData = {
            pid:$('#pid').val(),
            officeCode:$('#officeCode').val(),
            officeName:$('#officeName').val()
        };
        
        utils.post({
            url:'${ctx}/admin/addOffice',
            data:postData,
            success:function (data) {
                if(data.code==200){
                    $('#addOfficeModal').modal('hide');
                    layer.msg('添加成功',{}, function(){
                        window.location.reload();
                    });
                }else{
                    layer.alert(data.message, {
                        skin: 'ayui-bg-orange'
                        ,closeBtn: 0
                    });
                }
            }
        });
    }

    var allData = new Array();

    var DataSourceTree = function (options) {
        this._data = options.data;
        this._delay = options.delay;
    };

    DataSourceTree.prototype = {
        data: function (options, callback) {
            var appendData = getSubData(options.additionalParameters);
            //读取服务器数据
            setTimeout(function () {
                callback({data: appendData});
            }, this._delay)
        }
    };

    jQuery(document).ready(function () {
        loadData();
    });

    //查询树的子节点
    function getSubData(params) {
        var id;
        if (params != undefined) {
            id = params.id;
        }
        var data = new Array();
        $.each(allData, function (index, obj) {
            if (obj.pid == id) {
                data.push({
                    name: obj.officeName + "<div class=\"tree-actions\"><i class=\"fa fa-plus\" onclick=\"add(event, '" + obj.id + "')\"></i><i class=\"fa fa-trash-o\" onclick=\"remove(event,'" + obj.id + "')\"></i></div>",
                    type: isLeaf(obj.id) ? 'item' : 'folder',
                    additionalParameters: {
                        id: obj.id
                    }
                });
            }
        });
        return data;
    }

    function add(event, id) {
        if(id!=undefined){
            var officeName = getOfficeName(id);
            $('#pid').val(id);
            $('#pidOfficeName').val(officeName);
        }
        var modal = $('#addOfficeModal').modal();
        modal.on('hidden.bs.modal', function(){
            resetAddForm();
        });
        //js阻止事件冒泡
        event.cancelBubble = true;
        event.stopPropagation();
    }

    //重围新增表单
    function resetAddForm(){
        $('#pid').val('');
        $('#pidOfficeName').val('');
        $('#officeCode').val('');
        $('#officeName').val('');
    }

    //删除当前科室
    function remove(event, id) {
        var confirm = layer.confirm("确认要删除此科室吗？", {
            btn: ["确认", "取消"]
        }, function () {
            utils.post({
                url: '${ctx}/admin/delOffice',
                data: {
                    officeId: id
                },
                sccuess: function (data) {
                    if (data.code == 200) {
                        layer.msg('操作成功', {}, function(){
                            window.location.reload();
                        });
                    } else {
                        layer.alert(data.message);
                    }
                }
            });
        }, function () {

        });
        //js阻止事件冒泡
        event.cancelBubble = true;
        event.stopPropagation();
    }

    function getOfficeName(id) {
        if (utils.isNoValue(id)) {
            return "";
        }
        for (var i = 0; i < allData.length; i++) {
            var obj = allData[i];
            if (obj.id == id) {
                return obj.officeName;
            }
        }
        return "";
    }

    //加截数据并初始化树
    function loadData() {
        utils.get({
            url: '${ctx}/admin/listAllOffice',
            data: {},
            success: function (data) {
                if (data.code = 200) {
                    allData = data.data;
                    initTree();
                } else {
                    alert('请求数据时出现错误');
                }
            }
        });
    }

    //判断当前是含有子节点
    function isLeaf(id) {
        for (var i = 0; i < allData.length; i++) {
            if (allData[i].pid == id) {
                return false;
            }
        }
        return true;
    }

    //初始化树
    function initTree() {
        var parentData = new Array();
        dataSource = new DataSourceTree({
            data: parentData,
            delay: 400
        });

        $('#tree').tree({
            dataSource: dataSource,
            loadingHTML: '<img src="${ctxStatic}images/input-spinner.gif"/>',
            'selectable': false,
        });
    }
</script>
</body>
</html>
